import React from 'react';
import { Empty, Row, Col, Card } from 'antd';

interface ConfigManagementProps {
    unitInfo: any;
}

/**
 * 配置管理Tab组件
 * 用于展示和管理单元的扫描任务配置
 */
const ConfigManagement: React.FC<ConfigManagementProps> = ({ unitInfo }) => {
    if (!unitInfo) {
        return <Empty description="单元信息加载中..." />;
    }

    return (
        <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '500px' }}>
            {/* 扫描任务配置 */}
            <Row gutter={[24, 24]}>
                <Col span={24}>
                    <Card
                        title={
                            <span style={{ fontSize: '18px', fontWeight: '600' }}>
                                ⚙️ 扫描任务配置
                            </span>
                        }
                        style={{
                            borderRadius: '12px',
                            boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
                        }}
                    >
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 0' }}>
                            <div style={{ display: 'flex', gap: '48px', flexWrap: 'wrap' }}>
                                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                                    <span style={{ fontSize: '24px' }}>{unitInfo.saTask ? '✅' : '❌'}</span>
                                    <div>
                                        <div style={{ fontSize: '16px', fontWeight: '500', color: '#333' }}>SA扫描</div>
                                        <div style={{ fontSize: '12px', color: '#999' }}>静态分析扫描</div>
                                    </div>
                                </div>
                                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                                    <span style={{ fontSize: '24px' }}>{unitInfo.gitTask ? '✅' : '❌'}</span>
                                    <div>
                                        <div style={{ fontSize: '16px', fontWeight: '500', color: '#333' }}>Git扫描</div>
                                        <div style={{ fontSize: '12px', color: '#999' }}>代码仓库扫描</div>
                                    </div>
                                </div>
                                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                                    <span style={{ fontSize: '24px' }}>{unitInfo.apmTask ? '✅' : '❌'}</span>
                                    <div>
                                        <div style={{ fontSize: '16px', fontWeight: '500', color: '#333' }}>APM扫描</div>
                                        <div style={{ fontSize: '12px', color: '#999' }}>应用性能监控</div>
                                    </div>
                                </div>
                                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                                    <span style={{ fontSize: '24px' }}>{unitInfo.jarTask ? '✅' : '❌'}</span>
                                    <div>
                                        <div style={{ fontSize: '16px', fontWeight: '500', color: '#333' }}>JAR扫描</div>
                                        <div style={{ fontSize: '12px', color: '#999' }}>依赖包分析</div>
                                    </div>
                                </div>
                            </div>
                            <div style={{
                                fontSize: '14px',
                                color: '#666',
                                background: '#f0f0f0',
                                padding: '8px 16px',
                                borderRadius: '6px',
                                fontWeight: '500'
                            }}>
                                {[unitInfo.saTask, unitInfo.gitTask, unitInfo.apmTask, unitInfo.jarTask].filter(Boolean).length}/4 个任务已开启
                            </div>
                        </div>
                    </Card>
                </Col>
            </Row>
        </div>
    );
};

export default ConfigManagement;
